<template>
  <div class="common-page-container">
    <a-card :bordered="false" class="common-content-card">
      <!-- 搜索区域 -->
      <SearchForm 
        :query-params="queryParams"
        @search="handleSearch"
        @reset="handleReset"
        class="common-search-form"
      />
      
      <!-- 操作按钮区域 -->
      <TableOperations 
        :is-expand-all="isExpandAll"
        @add="handleAdd"
        @expand-all="handleExpandAll"
        @refresh="handleRefresh"
        class="common-table-operations"
      />

      <!-- 表格区域 -->
      <MenuTable
        v-if="!loadError && menuList && menuList.length > 0"
        :loading="loading"
        :dataSource="menuList"
        @add="(parentId: number) => handleAdd(menuList.find(item => Number(item.id) === parentId))"
        @edit="handleEdit"
        @delete="(id: number) => handleDelete(menuList.find(item => Number(item.id) === id) as Menu)"
      />
      
      <!-- 加载出错或无数据时显示重试按钮 -->
      <Empty
        :loading="loading"
        :load-error="loadError"
        :error-message="errorMessage"
        :data-list="menuList"
        empty-text-key="menu.emptyData"
        @retry="fetchMenuList"
      />
    </a-card>

    <!-- 菜单表单弹窗 -->
    <MenuFormModal
      v-model:open="modalVisible"
      :form="form"
      :loading="submitLoading"
      :form-title="formTitle"
      :parent-tree-data="parentTreeData"
      @select-icon="iconModalVisible = true"
      @submit="handleSubmit"
      class="common-modal-form"
    />
    
    <!-- 图标选择器弹窗 -->
    <IconSelectorModal
      v-model:open="iconModalVisible"
      :model-value="form.icon || ''"
      @update:model-value="(val) => form.icon = val"
      class="common-modal-form"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import useMenuManagement from './hooks/useMenuManagement'
import { useTableColumns } from './config/tableColumns'
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import MenuTable from './components/MenuTable.vue'
import MenuFormModal from './components/MenuFormModal.vue'
import IconSelectorModal from './components/IconSelectorModal.vue'
import type { Menu } from '@/types/api/system/menu'

// 组件名称
defineOptions({
  name: 'MenuManagement'
})


// 使用菜单管理钩子
const {
  // 状态
  loading,
  submitLoading,
  modalVisible,
  iconModalVisible,
  menuList,
  expandedKeys,
  isExpandAll,
  queryParams,
  form,
  formTitle,
  parentTreeData,
  loadError,
  errorMessage,

  // 方法
  onExpandedRowsChange,
  handleSearch,
  handleReset,
  handleExpandAll,
  handleRefresh,
  handleAdd,
  handleEdit,
  handleDelete,
  handleStatusChange,
  handleVisibleChange,
  handleSubmit,
  fetchMenuList
} = useMenuManagement()

// 表格列配置
const columns = useTableColumns()

// 初始化
onMounted(() => {
  fetchMenuList()
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 